<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Add a 3D model</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

<!--    <link href='https://lbs.sgmap.cn/api/epgis-1.5.0.css' rel='stylesheet' />-->
<!--    <script src='https://lbs.sgmap.cn/api/epgis-js-1.5.0.min.js'></script>-->
    <link rel="stylesheet" href='http://172.16.85.201/api/epgis-1.5.0.css'/>
    <script type="text/javascript" src='http://172.16.85.201/api/epgis-js-1.5.0.min.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>

<!--<script src='https://lbs.sgmap.cn/products/docs/assets/js/threejs/three.js'></script>-->
<!--<script src="https://lbs.sgmap.cn/products/docs/assets/js/threejs/GLTFLoader.js"></script>-->
<!--<script src="https://lbs.sgmap.cn/products/docs/assets/js/threejs/OBJLoader.js"></script>-->
<!--<script src="https://lbs.sgmap.cn/products/docs/assets/js/threejs/MTLLoader.js"></script>-->
<script src='http://10.134.216.95:8233/gis/js/three.js'></script>
<script src="http://10.134.216.95:8233/gis/js/GLTFLoader.js"></script>
<script src="http://10.134.216.95:8233/gis/js/OBJLoader.js"></script>
<script src="http://10.134.216.95:8233/gis/js/MTLLoader.js"></script>


<div id='map'></div>
<script>

    var map;

    epgis.tokenTask.login('7b65df143ad533e8bb7faf9f4896c7af',"a8553e352b0c3a67993b5447dbd96914").then(function(){
        initMap();
    });


    function initMap() {

        map = window.map = new epgis.Map({
            container: 'map',
            style: 'aegis://styles/aegis/StreetsDark',
            zoom: 15.7,
            center: [119.9806, 31.5694],
            pitch: 60,
            localIdeographFontFamily: "'PingFang SC', 'Microsoft YoHei'",
        });

        var modelOrigin = [119.9806, 31.5694];
        var modelAltitude = 15;
        var modelRotate = [0, 0, 0];//Math.PI / 4
        var modelScale = 3.05843220338983e-6;

        var modelTransform = {
            translateX: epgis.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).x,
            translateY: epgis.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).y,
            translateZ: epgis.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).z,
            rotateX: modelRotate[0],
            rotateY: modelRotate[1],
            rotateZ: modelRotate[2],
            scale: modelScale
        };

        var THREE = window.THREE;

        var customLayer = {
            id: '3d-model',
            type: 'custom',
            renderingMode: '3d',
            onAdd: function (map, gl) {
                this.camera = new THREE.Camera();
                this.scene = new THREE.Scene();

                var directionalLight = new THREE.DirectionalLight(0xffffff);
                directionalLight.position.set(0, -70, 100).normalize();
                this.scene.add(directionalLight);

                var directionalLight2 = new THREE.DirectionalLight(0xffffff);
                directionalLight2.position.set(0, 70, 100).normalize();
                this.scene.add(directionalLight2);



                var mtlLoader = new THREE.MTLLoader();
                mtlLoader.setPath('./assets/model/changshu/');
                mtlLoader.setCrossOrigin("anonymous");

                var mtlList = [
                    '一.1.场平工程-2020.9.1-2020.11.31','一.2.1围墙基础-2020.10.1-2021.1.8','一.2.2围墙砌筑-2020.11.1-2021.1.31','二.1.1交流区域工程桩-2020.10.1-2020.11.31',

                    '二.1.2直流区域工程桩-2020.10.1-2020.11.31','二.1.3围墙桩-2020.9.15-2020.11.15','三.1.4换流区域道路-2021.4.15-2021.6.15','三.1主控楼-2021.1.1-2021.8.31',

                    '三.2.1辅控楼主体结构及建筑装修-2021.1.1-2021.7.31','三.2.2高端换流变基础及防火墙-2021.1.1-2021.5.30','三.2.3高端阀厅钢结构及围护-2021.5.1-2021.7.31',

                    '三.2.4高端阀厅地坪及附属设施-2021.8.1-2021.9.30','三.3.1辅控楼主体结构及建筑装修-2021.2.1-2021.12.31','三.3.2低端换流变基础及防火墙-2021.2.1-2021.10.31',

                    '三.3.3低端阀厅钢结构及围护-2021.10.1-2022.2.28','三.4.1高端换流变广场基础-2021.4.1-2021.5.15','三.4.2高端搬运轨道基础-2021.3.1-2021.5.20',

                    '三.4.4低端换流变广场基础-2021.4.1-2021.9.15','三.4.5低端搬运轨道基础-2021.3.10-2021.9.20','三.5.1交流滤波器场地道路-2021.3.15-2021.6.15',

                    '三.5.2构架基础-2021.4.7-2021.5.20','三.5.3设备基础-2021.4.10-2021.6.30','三.6.1 500kV GIS及配电装置场地道路-2021.4.15-2021.5.30',

                    '三.6.2 500kV GIS室基础-2021.3.1-2021.6.30','三.6.3 500kV GIS室基础钢结构安装-2021.7.1-2021.8.30','三.6.4 500kV GIS、GIL、站用变及构支架基础-2021.4.1-2021.8.30',

                    '三.6.5 10kV 400V 继电保护小室施工及装修-2021.4.1-2021.8.30','三.7.1 直流场道路-2021.5.1-2021.7.20','三.7.2 直流场构支架、设备基础-2021.5.5-2021.9.20',

                    '三.7.2 直流场所有基础','三.7.3 直流场电缆沟-2021.7.2-2021.11.30','三.8.1 综合楼-2021.2.1-2022.1.20','三.8.2 备品库-2021.3.1-2021.10.30',

                    '三.8.3 消防水池、工业水池-2021.4.1-2022.8.30','三.8.4 35kV站用电室及泵房-2021.3.1-2022.9.30','三.8.5 站前区道路-2021.1.1-2022.1.31',

                    '三.9.1消防管（含管沟）、给、排水管-2021.3.15-2022.10.31','四.3.1高端阀冷设备安装-2021.12.1-2022.3.31','四.3.2高端换流阀安装-2021.12.16-2022.3.31',

                    '四.4.1低端阀外冷设备安装-2021.12.1-2022.5.31','四.4.2低端换流阀安装1-2022.1.16-2022.5.31-1','四.4.2低端换流阀安装1-2022.1.16-2022.5.31-2',

                    '四.4.2低端换流阀安装1-2022.1.16-2022.5.31-3','四.4.2低端换流阀安装2-2022.1.16-2022.5.31-1','四.4.2低端换流阀安装2-2022.1.16-2022.5.31-2',

                    '四.4.2低端换流阀安装2-2022.1.16-2022.5.31-3','四.5.1高端换流变安装-2021.12.1-2022.3.15','四.6.1低端换流变安装-2021.12.1-2022.5.15',

                    '四.7.1构架安装-2021.8.1-2021.8.31','四.7.2母线及设备安装-1-2021.8.1-2021.12.15','四.7.2母线及设备安装-2-2021.8.1-2021.12.15',

                    '四.7.3继保方舱安装-2021.9.30-2021.10.20','四.8.1 500kV站用变及构架安装-2021.8.1-2021.10.31','四.8.2 500kV户外设备支架、设备安装-2021.8.1-2021.10.10',

                    '四.9.1站用变安装-2021.8.20-2021.9.20','四.10.1直流场设备安装-2021.10.1-2022.12.31-1','四.10.1直流场设备安装-2021.10.1-2022.12.31-2',

                    '四.10.1直流场设备安装-2021.10.1-2022.12.31-3','四.10.1直流场设备安装-2021.10.1-2022.12.31-4','四.10.1直流场设备安装-2021.10.1-2022.12.31-5'

                ];

                mtlList.forEach((name)=>{
                    mtlLoader.load(name+'.mtl', function (material) {

                        var objLoader = new THREE.OBJLoader();

                        //设置当前加载的纹理
                        objLoader.setMaterials(material);
                        objLoader.setPath('./assets/model/changshu/');

                        objLoader.load(name+'.obj', function (object) {

                            object.scale.set(.105, .105, .105);

                            this.scene.add(object);

                        }.bind(this));

                    }.bind(this));

                });

                this.map = map;

                this.renderer = new THREE.WebGLRenderer({
                    canvas: map.getCanvas(),
                    context: gl
                });

                this.renderer.autoClear = false;
            },
            render: function (gl, matrix) {
                var rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX);
                var rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY);
                var rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ);

                var m = new THREE.Matrix4().fromArray(matrix);
                var l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ)
                    .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale))
                    .multiply(rotationX)
                    .multiply(rotationY)
                    .multiply(rotationZ);

                this.camera.projectionMatrix.elements = matrix;
                this.camera.projectionMatrix = m.multiply(l);
                this.renderer.state.reset();
                this.renderer.render(this.scene, this.camera);
                this.map.triggerRepaint();
            }
        };



        map.on('style.load', function () {
            map.addLayer(customLayer);
            map.setLayoutProperty("Building", "visibility", "none");
        });


    }

</script>

</body>

</html>
